<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getGoldList } from '../api';
import Table from './Table.vue';

interface ISJSDataModal {
    name: string;
    recentPrice: string;
    topPrice: string;
    bottomPrice: string;
    openPrice: string;
    updateTime: string;
};

interface ISBDataModal {
    name: string;
    taxExclusivePrice: string;
    wage: string;
    taxInclusivePrice: string;
    updateTime: string;
};

type IOtherBrands = ISJSDataModal;

interface IDataModal {
    SJSData: ISJSDataModal[];
    SBData: ISBDataModal[];
    otherBrands: IOtherBrands[];
}

interface IResultModal {
    code: number;
    data: IDataModal;
    msg: string;
}
const list = ref<IDataModal>({
    SJSData: [],
    SBData: [],
    otherBrands: []
});
const loading = ref(false);
const tableColumns = ref<{
    value: string;
    label: string;
}[]>([{
    value: 'name',
    label: '种类'
}, {
    value: 'recentPrice',
    label: '最新价'
}, {
    value: 'openPrice',
    label: '开盘价'
}, {
    value: 'updateTime',
    label: '更新时间'
}])
const tableColumns2 = ref<{
    value: string;
    label: string;
}[]>([{
    value: 'name',
    label: '种类'
}, {
    value: 'taxExclusivePrice',
    label: '不含税'
}, {
    value: 'wage',
    label: '工费'
}, {
    value: 'updateTime',
    label: '更新时间'
}])

const tableColumns3 = ref<{
    value: string;
    label: string;
}[]>([{
    value: 'name',
    label: '种类'
}, {
    value: 'recentPrice',
    label: '最新价'
}, {
    value: 'openPrice',
    label: '开盘价'
}, {
    value: 'updateTime',
    label: '更新时间'
}])

onMounted(() => {
    loading.value = true;
    getGoldList().then((res: IResultModal) => {
        if (res.code === 1) {
            loading.value = false;
            list.value = res.data;
        }
    })
})


</script>

<template>
    <div class="goldPrice">
        <van-loading vertical v-if="loading" />
        <div v-else>
            <Table title="上交所实时现货金价" :data="list.SJSData" :columns="tableColumns"></Table>
            <Table title="水贝首饰现货金价" :data="list.SBData" :columns="tableColumns2"></Table>
            <Table title="其他品牌实时现货金价" :data="list.otherBrands" :columns="tableColumns3"></Table>
        </div>

    </div>
</template>

<style scoped>
/* 样式 */
.goldPrice {
    padding: 0 1rem 3.1rem 1rem;
}
</style>